import React, { Component, useState,useEffect } from 'react';
import { Platform, StyleSheet, Text, View, Image, TouchableOpacity, Dimensions, FlatList } from 'react-native';
import styles from '../styles/style'
import { sendData } from '../utils/request';
import api from '../utils/api';
import Card from '../component/Card'

export default function List({navigation}){
    const [list,setList] = useState([]);

    useEffect(()=>{
        getList()
    },[])

    const getList=()=> {
        sendData({
            url: api.list,
            method: 'get',
            params: {}
        }).then(data => {
            console.log(data)
            setList(data.data)
        })
    }

    const _keyExtractor = (item, index) => index;

    const emptyRender=()=> {
        return <View />
    }

    const renderItem=(data)=> {
        var item = data.item
        return <TouchableOpacity style={styles.list_item} onPress={() => goDetail(item.id)}>
            <Card data={item} />
            <View style={styles.item_content}>
                <View style={styles.row_between}>
                    <Text style={[styles.text_bold, styles.text_333]}>{item.title}</Text>
                    <Text style={[styles.text_bold, styles.text_333]}></Text>
                </View>
                <Text style={[styles.text_666, styles.tag_line]}>{item.tagline}</Text>
                <View style={styles.list_item_tags}>
                    <View style={[styles.list_item_tag, styles.list_item_tag_sel]}>
                        <Text style={[styles.text_white, styles.list_item_tag_text]}>{item.difficulty}</Text>
                    </View>
                    <View style={styles.list_item_tag}>
                        <Text style={[styles.text_333, styles.list_item_tag_text]}>Beginner</Text>
                    </View>
                    <View style={styles.list_item_tag}>
                        <Text style={[styles.text_333, styles.list_item_tag_text]}>Beginner</Text>
                    </View>
                    <View style={styles.list_item_tag}>
                        <Text style={[styles.text_333, styles.list_item_tag_text]}>Beginner</Text>
                    </View>

                </View>
            </View>
        </TouchableOpacity>
    }

    const goDetail=(program_id)=> {
        navigation.push('Detail', { program_id: program_id })
    }

    return (
        <View style={styles.container}>
            <FlatList
                ListEmptyComponent={() => emptyRender()}
                data={list}
                keyExtractor={_keyExtractor}
                renderItem={item => renderItem(item)}
            />
        </View>
    );

    

}